<template>
    <div class="order-report">
        <div class="report-table-top-title">
            发布管理
            <span
                style="color: #000; font-size: 15px; margin-left: 20px"
            ></span>
            <span style="float: right">
                <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="$emit('save')"
                    >返回</el-button
                >
            </span>
        </div>
        <!-- 表单主体 -->
        <div class="report-table-form1">
            <div class="headData">
                <div class="row">
                    <div class="item">
                        升级包名称： <span>{{ form.packageName }}</span>
                    </div>
                    <div class="item">
                        设备类型：
                        <span>{{ form.terminalTypeName }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        内部版本号：
                        <span>{{ form.internalPackageVersionCode }}</span>
                    </div>
                    <div class="item">
                        升级包版本号：
                        <span>{{ form.packageVersionCode }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        升级包文件类型：
                        <span>{{ form.upgradePackageFileTypeName }}</span>
                    </div>
                    <div class="item">
                        升级包状态： <span>{{ form.upgradeStatusName }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="main-wrapper">
            <div style="width: 100%">
                <el-form
                    ref="searchForm"
                    :inline="true"
                    :model="searchForm"
                    size="small"
                    label-width="80px"
                    style="padding-top: 15px"
                >
                    <el-form-item label="商家编号:" prop="companyCode">
                        <el-input v-model="searchForm.companyCode"></el-input>
                    </el-form-item>
                    <el-form-item label="商家名称:" prop="companyName">
                        <el-input v-model="searchForm.companyName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            @click="
                                position = 1
                                getList()
                            "
                            >查询</el-button
                        >
                        <el-button
                            type="primary"
                            size="small"
                            plain
                            @click="resetFields"
                            >重置</el-button
                        >
                        <el-button
                            type="primary"
                            :disabled="
                                row.upgradeStatusValue === 15 ||
                                row.upgradeStatusValue === 20
                            "
                            v-if="row.upgradeModel === 0"
                            size="small"
                            @click="showAdd = true"
                            >新增场所</el-button
                        >
                    </el-form-item>
                </el-form>

                <div style="margin-left: 15px">
                    <!-- <div style="margin-bottom: 10px">
                        <el-button
                            type="primary"
                            :disabled="
                                row.upgradeStatusValue === 15 ||
                                row.upgradeStatusValue === 20
                            "
                            v-if="row.upgradeModel === 0"
                            size="small"
                            @click="showAdd = true"
                            >新增场所</el-button
                        >
                        <el-button
                            type="primary"
                            :disabled="
                                row.upgradeStatusValue === 15 ||
                                row.upgradeStatusValue === 20
                            "
                            size="small"
                            v-if="row.upgradeModel === 1"
                            @click="showEquipment = true"
                            >新增设备</el-button
                        >
                    </div> -->
                    <el-table
                        :header-cell-style="headerCellStyle"
                        :data="tableData"
                        size="small"
                        width="100%"
                    >
                        <el-table-column label="商家编号" prop="companyCode">
                        </el-table-column>
                        <el-table-column
                            label="商家名称"
                            prop="companyName"
                        ></el-table-column>
                        <el-table-column
                            label="设备类型"
                            prop="terminalTypeName"
                        ></el-table-column>
                        <el-table-column
                            label="当前版本号"
                            prop="outcurrentVersionCode"
                        ></el-table-column>
                        <el-table-column
                            label="指定版本号"
                            prop="outSpecifiedVersionCode"
                        ></el-table-column>
                        <el-table-column
                            label="创建时间"
                            prop="createTime"
                        ></el-table-column>
                        <el-table-column
                            label="更新时间"
                            prop="updateTime"
                        ></el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    size="mini"
                                    plain
                                    @click="showPage('showUpChange', scope.row)"
                                    >设备升级状态记录</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div style="width: 100%; padding: 15px" class="right">
                    <el-pagination
                        background
                        :current-page.sync="position"
                        @current-change="handleCurrentChange"
                        :page-size="pageSize"
                        layout="prev, pager, next, total"
                        :total="totalNum"
                    ></el-pagination>
                </div>
                <addPlace
                    :value.sync="showAdd"
                    :currRow="row"
                    @init="init"
                ></addPlace>
                <addEquipment
                    :currRow="row"
                    :value.sync="showEquipment"
                    @init="init"
                ></addEquipment>
            </div>
        </div>
        <statusChange
            :value.sync="showStatusChange"
            :currRow="currRow"
        ></statusChange>
        <upChange :value.sync="showUpChange" :currRow="currRow"></upChange>
    </div>
</template>

<script type="text/ecmascript-6">
import * as echarts from 'echarts'
import addPlace from './components/addPlace'
import addEquipment from './components/addEquipment'
import upChange from './components/upChange'
import statusChange from './components/statusChange'
export default {
    props: {
        row: Object,
        pageType: String
    },
    components: {
        addPlace,
        addEquipment,
        statusChange,
        upChange
    },
    data: function () {
        return {
            showStatusChange: false, // 状态变更
            showUpChange: false, // 升级变更
            showEquipment: false, // 新增设备
            showAdd: false, // 新增场所
            currRow: {},
            searchForm: {
                companyCode: '',
                companyName: ''
            },
            position: 1,
            pageSize: 10,
            totalNum: 0,
            tableData: [],
            listLoading: false,
            loading: false,
            form: {
                upgradeTaskCountInfo: {}
            }
        }
    },
    mounted () {
    },
    created () {
        if (this.row.upgradePackageID) {
            this.init()
        }
    },
    methods: {
        init () {
            this.getList()
            this.getDetail()
        },
        resetFields () {
            this.$refs['searchForm'].resetFields()
            this.position = 1
            this.init()
        },
        deleteUpgradeTask (row) {
            this.$confirm('确定移除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(this.$store.state.IP + `/upgradeManage/deleteUpgradeTask?upgradeTaskID=${row.upgradeTaskID}`,
                    {
                        'emulateJSON': false
                    }
                ).then(response => {
                    this.loading = false
                    console.log(response)
                    response = response.body
                    if (response.ret === '0') {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.init()
                    }
                }, response => {
                    this.loading = false
                    console.log('通讯失败')
                })
            }).catch(() => {
            })
        },
        getList () {
            this.$http.post(this.$store.state.IP + '/upgradeManage/upgradeTaskList', {
                ...this.searchForm,
                upgradePackageID: this.row.upgradePackageID,
                page: this.position - 1,
                size: this.pageSize,
                upgradeStage: 2
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                this.tableData = []
                if (response.ret === '0') {
                    this.tableData = response.res.list
                    this.totalNum = response.res.total
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        handleCurrentChange (page) {
            // 换页
            this.position = page
            this.getList()
        },
        showPage (name, row) {
            this.currRow = row
            this[name] = true
        },
        createMap () {
            var chartDom = document.getElementById('bingMap')
            var myChart = echarts.init(chartDom)
            var option
            option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'right'
                        },
                        data: [
                            { value: this.form.upgradeTaskCountInfo.notReceiveNum, name: '待领取' },
                            { value: this.form.upgradeTaskCountInfo.hasReceiveNum, name: '已领取' },
                            { value: this.form.upgradeTaskCountInfo.inUpgradeNum, name: '升级中' },
                            { value: this.form.upgradeTaskCountInfo.successUpgradeNum, name: '升级成功' }
                        ]
                    }
                ]
            }
            option && myChart.setOption(option)
        },
        getDetail () {
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/upgradeManage/upgradeInfoDetail?upgradePackageID=' + this.row.upgradePackageID + '&upgradeStage=2', params).then(response => {
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.form = response.res
                    // this.$nextTick(() => {
                    //     this.createMap()
                    // })
                    this.listLoading = false
                }
                if (response.ret !== '0') {
                    this.listLoading = false
                }
            }, response => {
                this.listLoading = false
            })
        },
        addAnswer (id) {
            if (this.form.marketInfo.length > 0 & id) {
                return
            }
            if (this.chipCode === '') {
                this.$message({
                    message: 'SN码不能为空',
                    type: 'warning'
                })
                return
            }
            let sum = 0
            this.form.marketInfo.forEach(item => {
                if (item.chipCode === this.chipCode) {
                    sum++
                }
            })
            console.log(sum)
            if (sum > 0) {
                this.$message({
                    message: 'SN码已添加，请勿重复添加',
                    type: 'warning'
                })
                return
            }
            this.loading = true
            this.$http.post(this.$store.state.IP + '/stoneOrderManage/stoneSnCheck', {
                chipCode: this.chipCode,
                id: this.row.id || null
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.form.marketInfo.push({
                        chipCode: this.chipCode,
                        id: id
                    })
                    this.chipCode = ''
                    this.loading = false
                } else {
                    this.loading = false
                }
            }, response => {
                this.loading = false
                console.log('通讯失败')
            })
        },
        del (index) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.marketInfo.splice(index, 1)
            }).catch(() => {

            })
        },
        // 保存表单
        save () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.marketInfo.length === 0) {
                        this.$message({
                            message: '设备信息不能为空',
                            type: 'warning'
                        })
                        return
                    }
                    this.loading = true
                    this.$http.post(this.$store.state.IP + '/stoneOrderManage/stoneOrderInput', {
                        ...this.form
                    },
                        {
                            'emulateJSON': false
                        }
                    ).then(response => {
                        console.log('-------------------------------------------')
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.$emit('save')
                            this.loading = false
                        } else {
                            this.loading = false
                        }
                    }, response => {
                        this.loading = false
                        console.log('通讯失败')
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        getName (id) {
            let obj = null
            this.agentList.some(item => {
                if (item.id === id) {
                    obj = item
                }
            })
            this.form.agentName = obj ? obj.agentName : ''
            console.log(this.form)
        },
        remoteMethod (query) {
            if (query !== '') {
                this.listLoading = true
                this.getAnageList(query)
            } else {
                this.agentList = []
            }
        },
        getAnageList (agentName) {
            // 获取 所有 代理商列表
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/stoneOrderManage/selectAgent?agentName=' + agentName, params).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    this.agentList = response.res
                    this.listLoading = false
                }
                if (response.ret !== '0') {
                    this.listLoading = false
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                this.listLoading = false
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.report-table-form1
    width: 100%
    min-height: 40px
    padding: 0 20px !important
    box-sizing: border-box
    background: #fff
    overflow: hidden

.report-table-top-title
    display: flex
    justify-content: space-between
    align-items: center
    width: 100%
    height: 64px
    color: #000
    font-size: 18px
    background: #f1f0f5

.headData
    display: flex
    font-size: 14px
    align-items: center
    padding: 15px

.headData span
    color: #999999

.flex
    display: flex
    align-items: center

.row
    flex: 1

.item
    height: 32px
    display: flex
    align-items: center

.li div
    width: 210px

.mapWrap
    position: relative

.totalLabel
    color: #999999
    position: absolute
    top: 40%
    width: 100%
    text-align: center

.totalValue
    color: #333333
    position: absolute
    top: 50%
    width: 100%
    text-align: center
    font-size: 18px

.page-padding-gray-small
    width: 100%
    height: 22px
    background: #f1f0f5

.main-wrapper
    background: #fff
    padding: 0px 20px

.right
    text-align: right

.el-dropdown-link
    color: #409EFF
    cursor: pointer
</style>
